<template>
	<div class="bg-white p-2">
		<Row>
			<Col class="p-1" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" span="6">
			<Input class="w-100" v-model="name" placeholder="请输入会员券名称" :onkeyup="name = name.replace(/\s+/g,'')" />
			</Col>
			<Col class="p-1" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" span="6">
			<Input class="w-100" v-model="uuId" placeholder="请输入卡号" :onkeyup="uuId = uuId.replace(/\s+/g,'')" />
			</Col>
			<Col class="p-1" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" span="6">
			<Select class="w-100" v-model="statu" clearable placeholder="请选择会员券状态" @change="aa()" clearable>
				<Option v-for="item in voucherStatu" :value="item.value" :key="item.label">{{ item.label }}</Option>
			</Select>
			</Col>
			<Button class="m-1 float-right" shape="circle" type="primary" @click="search()"
				icon="ios-search">查询</Button>

		</Row>

		<Row>
			<Button class="m-1" type="error" @click="newVoucherRecord">新增</Button>
			<Button class="m-1 float-right" type="success" shape="circle" @click="exportV()">导出</Button>

		</Row>
		<Layout :class="'bg-white'">
			<Table border @on-selection-change="selection" :class="'m-1'" :columns="tableInfo.columnInfo"
				:data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="timeLongs">
					<span>{{row.timeLongs/60/24}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="password">
					<span v-if="row.password == '123'">无密码</span>
					<span v-else>{{row.password}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px"
						@click="show(row.recordId)">详细</Button>
				</template>
			</Table>
			<Table border :columns="columns4" :data="data1"></Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				name: "",
				uuId: "",
				statu: "",
				vrIds: [],

				voucherStatu: [{
						value: 1,
						label: '可用'
					},
					{
						value: 0,
						label: '禁用'
					},
				],
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 12,
					columnInfo: [{
							type: 'selection',
							width: 60,
							align: 'center'
						},
						{
							title: "编号",
							key: "recordId",
							render: (h, params) => {
								return h("span", params.index + (this.tableInfo.current - 1) * this.tableInfo
									.pageSize + 1);
							},
							width: 70
						},
						{
							title: "卡号",
							key: "uuId",
							width: 200
						},
						{
							title: "会员券名称",
							key: "name",
							width: 150
						},
						{
							title: "有效时长/天",
							slot: "timeLongs",
							// render: (h, params) => {
							// 	// let time = params.row.timeLongs / 60 / 24;
							// 	let time = params.row.timeLongs;
							// 	return h('span', time);
							// },
							width: 150
						},
						{
							title: "会员券密码",
							slot: "password",
							width: 200
						},
						{
							title: "会员券状态",
							key: "statu",
							width: 200
						},
						{
							title: "操作",
							slot: 'action'
						}
					],
					data: []
				}
			}
		},
		methods: {

			init: function() {
				this.$data.tableInfo.currentPage = 0;
				this.search();
			},
			selection: function(selectedArray) {
				this.vrIds = [];
				for (let index in selectedArray) {
					let vr = selectedArray[index];
					this.vrIds.push(vr.recordId);
				}
				console.log(this.vrIds);
			},
			exportV: function() {
				// let url = "http://localhost:7710/main/admin";
				let url = this.config.production.path;
				url += "/client/voucher-record/off-line?";

				url += "name=" + this.name;
				url += "&uuId=" + this.uuId;
				url += "&recordIdStr=" + JSON.stringify(this.vrIds);

				window.open(url, "_blank");
			},
			newVoucherRecord: function() {
				this.$router.push({
					name: "voucher_new"
				});
			},
			show: function(recordId) {
				this.$router.push({
					name: "voucher_detail",
					params: {
						recordId
					}
				});
			},
			update(recordId) {
				this.$router.push({
					name: "voucher_update",
					params: {
						recordId
					}
				});
			},
			search: function() {
				this.http.get({
					url: "/client/voucher-record/page",
					param: {
						current: this.$data.tableInfo.currentPage,
						name: this.$data.name,
						uuId: this.$data.uuId,
						statu: this.$data.statu
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					this.$data.tableInfo.data = data.records;
					let totalPage = Math.ceil(this.tableInfo.total / this.tableInfo.pageSize);
					totalPage = totalPage < 1 ? 1 : totalPage;
					if (this.tableInfo.currentPage > totalPage) {
						this.$data.tableInfo.currentPage = totalPage;
						this.search();
					};
					var or = this.$data.tableInfo.data;
					for (var i = 0; i <= or.length - 1; i++) {
						if (or[i].statu) {
							or[i].statu = "可用";
						} else {
							or[i].statu = "禁用";
						}
					}
				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {

			this.init();
		},
		watch: {
			$route(to, from) {
				if (to.path == "/voucher") {
					this.init();
				}
			}
		},
		handleCheckAll() {
			console.log("点击全选");

			this.alert("dianji ")
			if (this.indeterminate) {
				this.checkAll = false;
			} else {
				this.checkAll = !this.checkAll;
			}
			this.indeterminate = false;

			if (this.checkAll) {
				this.checkAllGroup = [];
			} else {
				this.checkAllGroup = [];
			}
		},
		/* checkAllGroupChange(data) {
			if (data.length === 3) {
				this.indeterminate = false;
				this.checkAll = true;
			} else if (data.length > 0) {
				this.indeterminate = true;
				this.checkAll = false;
			} else {
				this.indeterminate = false;
				this.checkAll = false;
			}
		} */
	}
</script>

<style>

</style>